<template>
  <div class="header-content">
    <ul class="category-list">
      <li class="category-item" v-for="(item,index) in categoryList" :class="{active:index===active}" @click="change(item,index)">
        <span>{{item.opt_name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    categoryList: {
      type: Array,
      default: []
    }
  },

  computed: {
    active() {
      return this.$store.state.cateHeader.active;
    }
  },
  methods: {
    change(item, index) {
      this.$store.commit("cateHeader/changeAcive", index);
      this.$store.commit("cateHeader/changeCategory", item);
    }
  }
};
</script>

<style lang="less" scoped>
.header-content ::-webkit-scrollbar {
  display: none;
}
.header-content {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  height: 0.41rem;
  border-bottom: 1px solid #e5e5e5;
  .category-list {
    position: relative;
    height: 0.51rem;
    font-size: 0.14rem;
    color: #333;
    text-align: center;
    top: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.16rem;

    .category-item {
      height: 0.41rem;
      display: inline-block;
      margin-left: 0.2rem;
      line-height: 0.41rem;
      text-align: center;
    }
    .active {
      span {
        border-bottom: 2px solid #e02e24;
        color: #e02e24;
        height: 0.41rem;
        display: inline-block;
        position: relative;
      }
    }
  }
  .category-list :first-child {
    margin-left: 0;
  }
}
</style>


